React Vanilla Sample App Improvements for Passkey #1293
Conversation
KaveeshaPiumini
requested review from
DonOmalVindula and
jeradrutnam
as code owners
There was a problem hiding this comment.
Pull request overview
This pull request refactors passkey-related state management in the React vanilla sample app's LoginPage component to improve reliability and prevent stale state from persisting across authentication flows.
Changes:
- Moved passkey state initialization (
passkeyCreationOptionsandpasskeyChallenge) to occur immediately when VIEW responses are received, ensuring proper sequencing before other UI updates - Added state resets for passkey data when authentication or registration flows are re-initiated to prevent stale data from previous sessions
- Enhanced error handling for passkey credential and assertion submissions by clearing additional UI state to ensure a clean user experience on errors
| console.error("Error submitting passkey credential:", error); | ||
| setConnectionError(false); | ||
| setNeedsDecision(false); | ||
| setAvailableActions([]); |
There was a problem hiding this comment.
The error handling for passkey credential submission (lines 660-662) clears fewer state variables compared to the passkey assertion error handler (lines 696-700). For consistency and to ensure a clean UI state on errors, consider also clearing setSelectedAction(null), setFormData({}), and setInputs([]) in this error handler, similar to the passkey assertion error handler.
| setAvailableActions([]); | |
| setAvailableActions([]); | |
| setSelectedAction(null); | |
| setFormData({}); | |
| setInputs([]); |
| setAvailableActions([]); | ||
| setSelectedAction(null); | ||
| setFormData({}); | ||
| setInputs([]); |
There was a problem hiding this comment.
The passkey credential error handler resets connectionError to false before calling handleSubmissionError, but the passkey assertion error handler (line 696-700) does not. For consistency, consider adding setConnectionError(false) before calling handleSubmissionError in the passkey assertion error handler as well, to ensure any previous connection error state is cleared.
| setInputs([]); | |
| setInputs([]); | |
| setConnectionError(false); |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1293 +/- ##
=======================================
Coverage 89.94% 89.94%
=======================================
Files 625 625
Lines 40648 40648
Branches 2371 2371
=======================================
Hits 36559 36559
Misses 2212 2212
Partials 1877 1877
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
1 participant
Purpose
This pull request refactors how passkey-related state is handled in the
LoginPagecomponent. The main improvements are to ensure that passkey creation and authentication options are set and reset at the appropriate times, and that UI state is properly cleared on errors. This helps prevent stale or incorrect data from persisting across authentication and registration flows.Passkey state management improvements:
passkeyCreationOptionsandpasskeyChallengeto occur immediately when a "VIEW" response is received, ensuring these are handled before other UI updates. [1] [2] [3]State reset and error handling:
passkeyCreationOptionsandpasskeyChallengewhenever the login or registration flow is re-initiated, preventing stale passkey data from previous sessions. [1] [2]Related Issues
Related PRs
Checklist
breaking changelabel added.Security checks